<template>
  <div class="pictures">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    :finished="finished"
    finished-text="没有更多了"
  >
    <div id="pictures" v-for="picture in pictures" :key="picture.id">

      <van-col span="2">
        <van-image width="100" height="100" :src="picture.icon" />
      </van-col>
      <van-col span="19" offset="3">
        <p class="author">{{ picture.name }}</p>
      </van-col>
      <p class="title">{{ picture.title }}</p>
      <img class="picture" :src="picture.picture" />
     <!-- 底部 -->
     <div id="footer" >
        <!-- 分享 -->
            <div @click="showPopup">
              <van-icon size="20"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/8e24d611-e899-463a-a726-c5ca4eafbf2a.png" />
              <span>552</span>
            </div>
            <van-popup class="share" v-model="show" round position="bottom" :style="{ height: '30%' }">
                <a class="show"  href="https://im.qq.com/">
                  <img src="../assets/iconfont/icon-qq.png" alt="">
                  <p>QQ</p>
                </a>
                <a class="show" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey">
                  <img src="../assets/iconfont/icon-kj.png" alt="">
                  <p>QQ空间</p>
                </a>
                <a class="show" href="https://weixin.qq.com/">
                  <img src="../assets/iconfont/icon-wx.png" alt="">
                  <p>微信好友</p>
                </a>
                <a class="show" href="https://weixin.qq.com/">
                  <img src="../assets/iconfont/icon-pyq.png" alt="">
                  <p>朋友圈</p>
                </a>
                <a class="show" href="https://weibo.com/u/6602603777/home?wvr=5">
                  <img src="../assets/iconfont/icon-wb.png" alt="">
                  <p>微博</p>
                </a>
                <div class="show">
                  <img src="../assets/iconfont/icon-p.png" alt="">
                  <p>站内好友</p>
                </div>
                <div class="show">
                  <img src="../assets/iconfont/icon-sc.png" alt="">
                  <p>收藏</p>
                </div>
                 <div class="show">
                  <img src="../assets/iconfont/icon-pb.png" alt="">
                  <p>屏蔽该话题</p>
                </div>
                <div class="show">
                  <img src="../assets/iconfont/icon-jb.png" alt="">
                  <p>举报</p>
                </div>
            </van-popup>
            <!-- 评论 -->
            <router-link tag="div" :to="/comments/+picture.id">
                  <van-icon size="20"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/f218b62a-f570-4ab0-8a2e-2e442c227c05.png" />
                  <span>{{picture.list.comments}}</span>
           </router-link>
            <!-- 点赞 -->
            <div @click="zan">
                    <van-icon size="20" v-if="isClick==0"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/a11c89e5-716d-408f-beb9-480ad27669e0.png" />
                    <van-icon size="20" v-if="isClick==1"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/4ddbf869-6b57-4cbf-879f-a4ebccf3bc52.png" />
              <span v-if="isClick==0" >{{picture.list.news_likes}}</span>
              <span v-if="isClick==1">{{like}}</span>
            </div>
            <!-- 踩 -->
            <div @click="cai">
              <van-icon size="20"  name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-15a29732-5b04-46d4-9295-f64cf3846386/6be0ec84-8de4-49b8-9950-3637d5182b05.png" />
              <span>踩</span>
            </div>
       </div>
     <!--分割线  -->
     <div class="gap"></div>

    </div>
   </van-list>
    </van-pull-refresh>  
  </div>
</template>
<script>
import axios from 'axios'
import { Toast } from 'vant';
export default {
  props:['tab_id'],
  data() {
    return {
      pictures: [],
      finished: false,
      refreshing: false,
      param:{
            "page": 0,
            "rows": 2,
            "type_id":this.tab_id,           
        },
      show: false,
      isClick:'',
      lists:[],
      like:"",
    };
  },
  created() {
     this.onLoad()
  },
  methods: {
    onLoad(){
         axios.get('http://localhost:3000/news_picture',{
          params:this.param
        })
        .then(res => {
          var pictures1=res.data.data.pictureList
          // 上拉加载，下拉刷新
           if (pictures1.length < res.data.totals.totals) {
                this.param.page++
            }else{      
                this.finished = true
            }
            this.refreshing = false

          //查询每条数据的评论数和点赞数
          let news_ids=pictures1.map(value=>value.id)
          // console.log(news_ids);
          axios.get("http://localhost:3000/likeAndComments",{
          params:{
            news_id:news_ids
          }
        }).then((res) => {
          this.list=res.data.list
          pictures1.map(((value,index,array)=>
          {
          if(typeof this.pictures== "object"){
          this.pictures=array
          this.pictures[index].list=this.list[index]
          }  
          }))
          // console.log(this.pictures);   
      });
    }).catch(error => {
       console.log(error);
    })
},

    onRefresh(){
      setTimeout(()=>{
        this.onLoad()
        Toast('恭喜你，为你找到2条好贴');
      },1000)
      
        
    },
    zan(e){
        // 
        if(this.isClick==0){
          console.log()
              this.isClick=1
              this.like=Number(e.target.innerText)+1
              
        }else{
            this.isClick=0
            
        }
    },
     showPopup() {
      this.show = true;
    },
     cai(){
     Toast('已踩,该评论会减少曝光');
    }
  },
};
</script>
<style lang="less" scoped>
.pictures{
  .author {
  color: #ff9800;
  padding-top: 10px;
  font-size: 17px;
}
.title {
  line-height: 40px;
}
.picture {
  width: 50%;
  padding-left: 30px;
  margin-top: -15px;
}
.gap {
  margin-top: 1px;
  height: 5px;
  background:#9e9e9e4f;
}
}


#footer{
  display: flex;
  justify-content: space-around;
  margin-left: 17px;
  margin-top: 20px;
  margin-bottom: 10px;
  span{
        margin-left: 15px;

  }
  .share{
     display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
}
/deep/ .van-overlay{
    background-color:rgba(27, 21, 23, 0.205);
}

.show{
  flex-direction: column;
  img{
      width: 50px;
      height: 50px;
      margin: 10px;
  }
  p{
   text-align: center;
    margin-top: 1px;
    font-size: 10px;
  }
}
</style>